<template>
	<view class="page-index">
		<view class="bg-white p12">
			<view class="">
				<u-search placeholder="搜索关键词" :show-action="false" @search="initData"
					v-model="search.propertyName"></u-search>
			</view>
			<view class="u-flex u-f-jsb mt12">
				<view class="u-flex u-f-justify" @click="showPopup=true">{{search.propertyTypeName || '房源类型'}}
					<view v-if="search.propertyTypeName"
						@click.stop="search.propertyTypeName='',search.propertyType='',initData()">
						<u-icon name="close-circle" style="font-size: 28rpx;margin-left: 20rpx;margin-top: 2px;"
							color="#666"></u-icon>
					</view>
					<u-icon name="arrow-down" style="font-size: 24rpx;margin-left: 20rpx;margin-top: 2px;"
						color="#666"></u-icon>
				</view>
				<view class="u-flex u-f-justify" @click="showThreePicker">
					<area-picker ref="areaPicker" v-model="showArea" :areaId="search.region"
						:defaultIndex="defaultIndex" @onConfirm="onConfirm" class="fsz26"></area-picker>
					{{search.areaName || '区域'}}

					<view v-if="search.areaName" @click.stop="search.areaName='',search.region='',initData()">
						<u-icon name="close-circle" style="font-size: 28rpx;margin-left: 20rpx;margin-top: 2px;"
							color="#666"></u-icon>
					</view>
					<u-icon name="arrow-down" style="font-size: 24rpx;margin-left: 20rpx;margin-top: 2px;"
						color="#666"></u-icon>
				</view>
			</view>
		</view>
		<view class="p12">

			<view class="u-flex " style="flex-wrap:wrap;margin:0 -12rpx">
				<view style="width:50%;min-width:50%" v-for="(item,index) in dataList" :key="index"
					@click="toInfo(item)">
					<view class="p6">

						<image v-if="item.mainImage" :src="item.mainImage"
							style="width: 100%;height: 400rpx;display: block ;;" mode="aspectFill"></image>
						<view class="u-flex u-f-justify fz16 c9" v-else style="height: 400rpx;background: #f5f5f5;">暂无图片
						</view>
						<view class="mt5">
							<view class="fz14 u-line-2" style="height: 80rpx;">{{item.propertyName}}</view>
							<view class="fz12 mt6 c9 u-line-1">{{item.detailedAddress}}</view>
							<view class="u-flex fz12 mt10">
								<span class="c6">投资份额</span>
								<span class="color-price ml6">{{item.remainingShares}}</span>
							</view>

							<view class="u-flex fz12 mt4" v-if="item.preIncome">
								<span class="c6">预计收益</span>
								<span class="color-price ml6">￥{{item.preIncome}}</span>
							</view>

							<view class="u-flex fz12 mt5">
								<span class="c6">月租</span>
								<span class="color-price ml6">￥{{item.rentAmount}}</span>
							</view>
							<view class="u-flex fz12 mt5">
								<span class="c6">{{item.isRented==1?'出租中':'未出租'}}</span>
								<span class="color-price ml6"
									v-if="item.leaseEndDateFormat && item.isRented==1">租期至{{item.leaseEndDateFormat}}</span>
							</view>

						</view>
					</view>
				</view>

			</view>
		</view>
		<u-loadmore :status="loadStatus"></u-loadmore>


		<!-- 选择 -->
		<u-picker @confirm="popupConfirm" range-key="label" mode="selector" v-model="showPopup"
			:range="typeList"></u-picker>
	</view>
</template>

<script>
	import areaPicker from "@/components/area-picker/areaPicker.vue";
	export default {
		components: {
			areaPicker
		},
		data() {
			return {
				loadStatus: 'loadmore',
				page: 1,
				keyword: '',
				dataList: [],
				typeList: [],
				search: {
					propertyName: '',
				},
				defaultIndex: [0, 0, 0],
				showArea: false,
				showPopup: false,
			}
		},
		onShareAppMessage(e) {},
		// #ifdef MP-WEIXIN
		onShareTimeline() {

		},
		// #endif
		onShow() {

			this.$api.getHousingType({}, res => {
				if (res.code == 200) {
					this.typeList = res.data
				}
			})
			this.initData()
		},
		onLoad(e) {

		},

		onPageScroll(e) {},

		methods: {

			// 页面下拉到底部触发
			onReachBottom() {
				if (this.loadStatus == 'more') {
					this.getData()
				}
			},
			// 省市区联动初始化
			showThreePicker() {
				this.showArea = true
				// this.$refs.areaPicker.showPicker();
			},
			onConfirm(e) {
				console.log(e, 1111)
				this.search.areaName = e[0].name + " " + e[1].name
				this.search.region = e[1].id
				if (e[2].name) {
					this.search.areaName = e[0].name + " " + e[1].name + " " + e[2].name
					this.search.region = e[2].id
				}
				this.initData()
			},
			popupConfirm(e) {
				let idx = e[0]
				this.search.propertyType = this.typeList[idx].value
				this.search.propertyTypeName = this.typeList[idx].label
				this.initData()
			},

			toInfo(item) {
				uni.navigateTo({
					url: '/pages/product/info?id=' + item.id
				})
			},
			initData() {
				this.page = 1
				this.dataList = []
				this.getData()

			},
			getData() {
				let post = {
					pageNo: this.page,
					pageSize: 20,
					...this.search
				}

				this.$api.getHousingList(post, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.nav-logo {
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 10;
		padding: 20rpx 40rpx
	}

	.page-btn {

		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		z-index: 10;
		padding: 30rpx;
		text-align: center;


		.btn1 {

			text-align: center;
			color: #fff;
			display: inline-block;
			margin: 40rpx auto 0;
			padding: 12rpx 50rpx;
			background: #ABC7C9;
			border-radius: 40px;
		}

	}

	.page-index {
		position: relative;

		.item {
			position: relative;
		}

		.item-content {
			position: absolute;
			z-index: 1;
			color: #fff;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.btn {

			width: 144rpx;
			height: 50rpx;
			text-align: center;
			color: #fff;
			line-height: 50rpx;
			background: #ABC7C9;
			border-radius: 40px;
		}
	}

	.page-content {
		position: relative;
		z-index: 2
	}

	.btn-sure {

		width: 100%;
		height: 88rpx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		line-height: 88rpx;
		background: #ABC7C9;
		border-radius: 40px;
	}
</style>